
$(function () {
    let storage = window.localStorage
    let t = null
    function init() {

        let userid = getCookie("userid");
        let token = getCookie("token");
        let number = $(".ipt").attr("placeholder") - 0;
        let options = {
            url: "http://127.0.0.1:8888/cart/list",
            type: "GET",
            data: {
                id: userid
            },
            headers: {
                authorization: token
            },
            dataType: "json"
        };

        $.ajax(options)
            .done(function (res) {
                render(res.cart)
                console.log(res.cart);
                place(res.cart)
                changeNumber()
                changeGoods()
                $(".rec_list").on("mouseover", "li", changeList)
            })
    }
    //页面渲染
    function render(res) {

        $(".shop_list").html(res.map((item,index) =>
            `
                <div class="shop">
                        <ul>
                            <li><input type="checkbox"> <img src="${item.img_small_logo}" alt=""></li>
                            <li> ${item.title}</li>
                            <li>【收藏加购，优先发货…</li>
                            <li class="price">￥${item.price}</li>
                            <li class="number" data-class="${item.goods_id}"> <span class="reduce">-</span><input type="text" placeholder="${item.cart_number}" class="ipt"><span class="add">+</span></li>
                            <li class="sum">￥${item.price * item.cart_number}</li>
                            <li><span class="delete">删除</span>
                                <p>移入关注</p>
                            </li>
                        </ul>
                    </div>
                `
        ).join(""))

        // t = setInterval(function(){
        if (res.length === 0) {
            $(".null").html(`
                    <a href="./index.html"><img src="../../static/img/cart/null_big.png" alt=""></a>
                    <div class="recommend">
                        <div class="rec_list">
                            <ul>
                            <li class="active">掌柜热卖<li>
                            <li>最近收藏<li>
                            <li>最近浏览<li>
                            <li>猜你喜欢<li>
                            </ul> 
                        </div>
                         
                        <div class="rec_content">
                            <div class="content active"><img src="../../static/img/cart/null_01.png" alt=""></div>
                            <div class="content active"><img src="../../static/img/cart/null_02.png" alt=""></div>
                            <div class="content active"><img src="../../static/img/cart/null_03.png" alt=""></div>
                            <div class="content active"><img src="../../static/img/cart/null_04.png" alt=""></div>
                        </div>

                    </div>
                    `)
        }
        // },17)
    }

    function changeList() {
        console.log($(".content"));
        let index = $(this).index() / 2
        console.log(index);
        $(this).addClass("active").siblings().removeClass("active")
        $(".content").eq(index).addClass("active").siblings().removeClass("active")
    }

    //读取localStorage  重新写入数据
    function place(cart) {

        //写入localStorage
        $.each(cart, function(index, ele){
            if(!storage[ele.goods_id]){
                storage[ele.goods_id] = ele.cart_number
            }
        })
        //总价不改变
        let ipt = $(".ipt")
        $.each(ipt, function (index, ele) {

            let get = $(this).parent().attr("data-class") - 0

            let price = $(this).parent().siblings(".price").html().slice(1, -3) - 0

            $(this).attr("placeholder", storage[get])
            console.log(typeof(storage.items) === "undefined");

            if (typeof(storage.items) === "undefined") {
                $(this).parent().siblings(".sum").html(`￥${storage[get] * price} `)
            } else {
                $(this).parent().siblings(".sum").html(`￥${price} `)
            }
        })
    }
    //点击改变商品数量
    function changeNumber() {
        $(".shop")
            .on("click", ".reduce", reduce)
            .on("click", ".add", add)
            .on("click", ".delete", delete_good)
        function reduce() {
            let index = $(this).parent().attr("data-class")
            let number = $(this).siblings(".ipt").attr("placeholder") - 0
            let price = $(this).parent().siblings(".price").html().slice(1, -3) - 0
            if (number === 1) {
                return false
            }
            number -= 1
            $(this).siblings(".ipt").attr("placeholder", number)
            $(this).parent().siblings(".sum").html(`￥${number * price}`)
            storage[index] = number
        }
        function add() {
            let index = $(this).parent().attr("data-class")
            let number = $(this).siblings(".ipt").attr("placeholder") - 0
            let price = $(this).parent().siblings(".price").html().slice(1, -3) - 0
            number += 1
            $(this).siblings(".ipt").attr("placeholder", number)
            $(this).parent().siblings(".sum").html(`￥${number * price}`)
            storage[index] = number
        }
        function delete_good() {
            if (confirm("您确定要删除当前商品吗")) {
                let userid = getCookie("userid");
                let token = getCookie("token");
                let del_index = $(this).parent().siblings(".number").attr("data-class")
                storage.removeItem(del_index)
                let goodsId = $(this).parent().siblings(".number").attr("data-class")
                let options = {
                    url: "http://127.0.0.1:8888/cart/remove",
                    type: "GET",
                    data: {
                        id: userid,
                        goodsId: goodsId
                    },
                    headers: {
                        authorization: token
                    },
                    dataType: "json"
                };

                $.ajax(options)
                    .done(function (res) {
                        if (res.code === 1) {
                            init()
                            alert(res.message)
                        }
                    })
            }
        }


    }

    function changeGoods(){

        $(".car").html(`<a>购物车(${storage.length})&nbsp;&nbsp;&nbsp;|</a>`)

    }

    init()

})